<div class="single-card">
  <div>
      <div class="single-title" style="text-align: center; font-size: 20px;border-bottom: solid 1px; padding-bottom: 5px">
        <div style="display: inline-block;float: left;">
          <label class="switch">
              <input onchange="setSwitchStatus($(this), {{ $id }}, '{{ csrf_token() }}')" id="switch_{{ $id }}" type="checkbox" @if($latestData['status']) checked @endif><div class="slider round"></div>
          </label>
        </div>
        <div style="display: inline-block;">{{ $name }} </div>
        <div style="text-align: right; font-size: 20px; display: inline-block; float: right;">
          <button onclick="location='{{ $url }}'" style="background: #99CC99;">详情</button>
        </div>
      </div>
      <div name="points" class="single-content" style="text-align: center; font-size: 22px;margin: 20px">
        @if($latestData)
            @foreach($latestData as $k => $one)
            @if($loop->index % 2 == 0)
            <div style="display: inline-block;width: 100%">
            @endif
            <span 
            @if($loop->index % 2 == 0)
            style="float: left;
            @else
            style="float: right;
            @endif
            ">
              <block style="font-size: 17px;">{{ $points[$k] }}</block>&nbsp;
              <block id="{{ $id }}_{{ $k }}" style="background: green">{{ $one }}</block>
            </span>
            @if($loop->index % 2 == 1)
            </div>
            @endif
            @endforeach
        @endif
      </div>
  </div>
  <div id="{{ $id }}_time" style="font-size: 15px; text-align: center;">{{ date("Y-m-d H:i:s", $time) }}</div>
</div>
<script type="text/javascript">
    Dcat.ready(function () {
        console.log('single-device');

        setTimeout(getSwitchRealtimeData{{ $id }}, 1000*{{ $autoRefresh }});
     
        function getSwitchRealtimeData{{ $id }}() {
            if (window.parent.location.href.indexOf('switch-realtime') < 0) {
              return;
            }

            setTimeout(getSwitchRealtimeData{{ $id }}, 1000*{{ $autoRefresh }});

            let url = "{{ URL::asset('admin/getSwitchRealtimeData') }}";
            let data = {
                _token: '{{ csrf_token() }}',
                time: {{ $time }},
                switchId: {{ $id }}
            }
            $.ajax({
                type : "POST",
                url : url,
                data : data,
                success : function(result) {
                    console.log(result)
                    if (result.code == 1) {
                        const aliases = Object.keys(result.data.latestData)
                        for(let i=0;i<aliases.length;i++){
                            $("#"+result.data.switchId+"_"+aliases[i]).html(result.data.latestData[aliases[i]])
                            $("#"+result.data.switchId+"_time").html(result.data.time)
                            if (result.data.latestData['status']) {
                              $("#switch_"+result.data.switchId).prop("checked",true)
                            } else {
                              $("#switch_"+result.data.switchId).prop("checked",false)
                            }
                        }
                    } else {
                        console.log(result.msg)
                    }
                },
                //请求失败，包含具体的错误信息
                error : function(e){
                    layer.close(e);
                    console.log(e.status);
                    console.log(e.responseText);
                }
            });
        }

    });
</script>